<!doctype html>
<!--
  Copyright The WildFly Authors
   SPDX-License-Identifier: Apache-2.0
-->
<html lang="en" data-bs-theme="dark">
    <head>
        <title>Streaming Example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="resources/css/hello.css" />
        <!-- CSS only -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
              integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    </head>
    <body class="bg-image">
        <nav class="navbar navbar-dark">
            <div class="container-fluid">
                <a href="#" class="navbar-brand">
                    <img src="/resources/images/wildfly_icons_one-color-logo.png" width="107" height="30" class="d-inline-block align-top" alt=""> WildFly AI</a>
            </div>
        </nav>
        <div aria-live="polite" aria-atomic="true" class="position-relative">
            <div id="liveAlertPlaceholder" class="toast-container top-0 end-0 p-3"></div>
        </div>
        <div class="container">
            <h1>Welcome to WildFly AI Server-Sent-Event page!</h1>
            <div>This is a simple example of calls to a langChain4J StreamingChatLanguageModel</div>

            <div>
                <div class="overflow-auto" id="output">
                </div>
                <div class="input-group">
                    <input type="text" class="form-control" id="question" placeholder="What is the best sci-fi movie?" aria-label="Ask me anything" >
                </div>
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
                integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
        <script>
            window.addEventListener("load", () => {
                const output = document.querySelector("div#output");
                const question = document.querySelector("input#question");
                question.focus();

                const scrollToBottom = () => {
                    window.scrollTo({
                        top: document.body.scrollHeight,
                        behavior: "smooth"
                    });
                }

                const addResponse = (q) => {
                    const responseContainer = document.createElement("p");
                    responseContainer.classList.add("container-fluid");

                    const title = document.createElement("h5");
                    title.textContent = q;
                    responseContainer.append(title);

                    const response = document.createElement("p");
                    responseContainer.append(response);

                    responseContainer.append(document.createElement("hr"));

                    output.append(responseContainer);

                    return response;
                };

                const makeRequest = () => {
                    const q = question.value;
                    const output = addResponse(q);
                    const uri = "rest/sse/chat?question=" + encodeURIComponent(q);
                    const source = new EventSource(uri);

                    source.addEventListener("token", (event) => {
                        const token = event.data;
                        if (token === "end-data-token") {
                            source.close();
                        } else {
                            output.innerHTML += token;
                            scrollToBottom();
                        }
                    });

                    source.addEventListener("error", (event) => {
                        console.error("EventSource failed:", event);
                        source.close();
                    });
                    question.value = "";
                    question.focus();
                };

                question.addEventListener("keypress", (e) => {
                    if (e.key === "Enter") {
                        makeRequest();
                    }
                });
            });
        </script>
    </body>
</html>

